<template>
  <div class="page-it" v-if="pageTotal > 1">
    <ul class="pagination fr">
      <li @click="goPage(pageNum - 1)" :class="pageNum === 1 ? 'disable': ''"><span class="choose"><</span></li>
      <li v-for="i in pageTotal"
          v-if="Math.abs(pageNum - i) < 5 || (pageNum < 5 && i < 10) || (pageTotal - pageNum < 5 && pageTotal - i < 9)"
          @click="goPage(i)" :class="pageNum === i ? 'active': ''">
        <span>{{i}}</span>
      </li>
      <li @click="goPage(pageNum + 1)" :class="pageNum === pageTotal ? 'disable': ''"><span class="choose">></span></li>
      <div class="middle" v-if="!noJump">
        <span class="span">跳至</span>
        <input  class="input" v-model="changeNum" type=tel @input="changePage(changeNum)"/>
        <span class="span">页</span>
      </div>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'pagination',
    data () {
      return {
        pageNum: 1,
        changeNum: 1,
        timer: null
      };
    },
    props: ['pageTotal', 'noJump'],
    mounted () {
      this.init();
    },
    methods: {
      init () {

      },
      changePage (changeNum) {
        const pageReg = /^[1-9]{1,}[\d]*$/,
              vm = this;
        if (vm.timer) {
          clearInterval(vm.timer);
        }
        if (`${changeNum}`.length === 0) {
          return;
        }
        if (!pageReg.test(changeNum) || vm.pageTotal < changeNum) {
          vm.changeNum = vm.pageNum;
          return;
        }
        vm.timer = setTimeout(() => {
          vm.pageNum = parseInt(changeNum);
          vm.$emit('query', {pageNum: vm.pageNum});
        }, 300);
      },
      /**
       * 分页跳转
       */
      goPage (pageNum) {
        if (pageNum === this.pageNum || pageNum < 1 || pageNum > this.pageTotal) {
          return;
        }
        if (pageNum < 1) {
          this.pageNum = 1;
        } else if (pageNum > this.pageTotal) {
          this.pageNum = this.pageTotal;
        } else {
          this.pageNum = pageNum;
        }
        this.changeNum = pageNum;
        this.$emit('query', {pageNum: pageNum - 1});
      }
    }
  };
</script>

<style lang="less" scoped>
.page-it{
  display: table;
  margin-top: 20px;
  width: 100%;
  .pagination {
    padding: 0;
    margin-right: 30px;
    overflow: hidden;
    border-right: none;
    float: right;
    li {
      float: left;
      cursor: pointer;
      margin: 0 3px;
      &>span {
        display: inline-block;
        background-color: #fff;
        min-width: 10px;
        height: 27px;
        padding: 1px 10px;
        text-align: center;
        line-height: 25px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      &.active {
        border-radius: 5px;
        span{
          border: 1px solid #FE6C3B;
          background-color: #FE6C3B;
          color: #fff;
        }
        &:hover {
          color: #fff;
        }
      }
      &:hover {
        color: #FE6C3B;
        border-radius: 5px;
        span{
          border: 1px solid #FE6C3B;
        }
        .choose{
          border: 1px solid #ddd;
        }
      }
      &.disable {
        color: #ddd;
        cursor: initial;
        background-color: initial;
        border-radius: 5px;
        &:hover {
          background-color: initial;
        border-radius: 5px;
        }
      }
    }
    .middle{
      display: inline-block;
      vertical-align: middle;
      margin: 0 0 0 10px;
      font-size: 12px;
      color: #666666;
      text-align: left;
      line-height: 18px;
      input{
        outline: 0;
        width: 46px;
        height: 27px;
        border: 1px solid #DFE2E6;
        border-radius: 4px;
        text-align: center;
        color: #333;
      }
    }
    .choose {
      font-family: cursive;
    }
  }
}
</style>
